<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <!-- 引入css -->
    <link rel="stylesheet" href="index.css">
    <!-- 引入JS -->
    <script src="index.js"></script>
</head>
<body>
    <div class="main">
        <div class="slides">
          <ul>
            <li class="active"><a href="#"><img src="./assets/b_01.jpg" alt="第1张图的描述信息"></a></li>
            <li><a href="#"><img src="./assets/b_02.jpg" alt="第2张图的描述信息"></a></li>
            <li><a href="#"><img src="./assets/b_03.jpg" alt="第3张图的描述信息"></a></li>
            <li><a href="#"><img src="./assets/b_04.jpg" alt="第4张图的描述信息"></a></li>
            <li><a href="#"><img src="./assets/b_05.jpg" alt="第5张图的描述信息"></a></li>
            <li><a href="#"><img src="./assets/b_06.jpg" alt="第6张图的描述信息"></a></li>
            <li><a href="#"><img src="./assets/b_07.jpg" alt="第7张图的描述信息"></a></li>
            <li><a href="#"><img src="./assets/b_08.jpg" alt="第8张图的描述信息"></a></li>
            <li><a href="#"><img src="./assets/b_09.jpg" alt="第9张图的描述信息"></a></li>
            <li><a href="#"><img src="./assets/b_10.jpg" alt="第9张图的描述信息"></a></li>
          </ul>
    
          <div class="extra">
            <h3>第1张图的描述信息</h3>
            <a class="prev" href="javascript:;"></a>
            <a class="next" href="javascript:;"></a>
          </div>
        </div>
        <div class="indicator">
          <ul>
            <li class="active">
              <img src="assets/s_01.jpg">
              <span class="mask"></span>
              <span class="border"></span>
            </li>
            <li>
              <img src="assets/s_02.jpg">
              <span class="mask"></span>
              <span class="border"></span>
            </li>
            <li>
              <img src="assets/s_03.jpg">
              <span class="mask"></span>
              <span class="border"></span>
            </li>
            <li>
              <img src="assets/s_04.jpg">
              <span class="mask"></span>
              <span class="border"></span>
            </li>
            <li>
              <img src="assets/s_05.jpg">
              <span class="mask"></span>
              <span class="border"></span>
            </li>
            <li>
              <img src="assets/s_06.jpg">
              <span class="mask"></span>
              <span class="border"></span>
            </li>
            <li>
              <img src="assets/s_07.jpg">
              <span class="mask"></span>
              <span class="border"></span>
            </li>
            <li>
              <img src="assets/s_08.jpg">
              <span class="mask"></span>
              <span class="border"></span>
            </li>
            <li>
              <img src="assets/s_09.jpg">
              <span class="mask"></span>
              <span class="border"></span>
            </li>
            <li>
              <img src="assets/s_10.jpg">
              <span class="mask"></span>
              <span class="border"></span>
            </li>
          </ul>
        </div>
      </div>
</body>
</html>